import React, { Component } from 'react';
import { ActivityIndicator } from 'react-native';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import XDate from '../../xdate';
import PropTypes from 'prop-types';
import styleConstructor from './style';
import { weekDayNames } from '../../dateutils';

class CalendarHeader extends Component {
  static propTypes = {
    theme: PropTypes.object,
    hideArrows: PropTypes.bool,
    month: PropTypes.instanceOf(XDate),
    addMonth: PropTypes.func,
    showIndicator: PropTypes.bool,
    firstDay: PropTypes.number,
    renderArrow: PropTypes.func,
    hideDayNames: PropTypes.bool,
    weekNumbers: PropTypes.bool,
    hideViewToggle: PropTypes.bool,
    weekendsObv: PropTypes.bool
  };

  constructor(props) {
    super(props);
    this.style = styleConstructor(props.theme);
    this.addMonth = this.addMonth.bind(this);
    this.substractMonth = this.substractMonth.bind(this);
    this.translateView = this.translateView.bind(this);
  }

  addMonth() {
    this.props.addMonth(1);
  }

  substractMonth() {
    this.props.addMonth(-1);
  }

  addYear = ()=> {
    this.props.addMonth(12);
  }

  substractYear = ()=> {
    this.props.addMonth(-12);
  }

  translateView() {
    this.props.translateView();
  }

  shouldComponentUpdate(nextProps) {
    if (
      nextProps.month.toString('yyyy MM') !==
      this.props.month.toString('yyyy MM')
    ) {
      return true;
    }
    if (nextProps.showIndicator !== this.props.showIndicator) {
      return true;
    }
    return false;
  }

  render() {
    let leftArrow = <View />;
    let rightArrow = <View />;
    let yearLeftArrow = <View />;
    let yearRightArrow = <View />;
    let weekDaysNames = weekDayNames(this.props.firstDay);
    let arrowLeftSource = this.props.hideViewToggle ? require('../img/previous_normal.png') : require('../img/previous_tall.png');
    let arrowRightSource = this.props.hideViewToggle ? require('../img/next_normal.png') : require('../img/next_tall.png');
    const headerStyle = [this.style.header];
    const weekendsObvTextStyle = [this.style.weekendsObvText];

    if(this.props.hideViewToggle){
      headerStyle.push({paddingRight:35,paddingLeft:35})
    }

      if (!this.props.hideArrows) {
      leftArrow = (
        <TouchableOpacity
          onPress={this.substractMonth}
          style={this.style.arrow}
        >
          {this.props.renderArrow
            ? this.props.renderArrow('left')
            : <Image
                source={arrowLeftSource}
                //style={this.style.arrowImage}
              />}
        </TouchableOpacity>
      );
      rightArrow = (
        <TouchableOpacity onPress={this.addMonth} style={this.style.arrow}>
          {this.props.renderArrow
            ? this.props.renderArrow('right')
            : <Image
                source={arrowRightSource}
                //style={this.style.arrowImage}
              />}
        </TouchableOpacity>
      );
    }

    if (!this.props.hideArrows) {
      yearLeftArrow = (
          <TouchableOpacity
              onPress={this.substractYear}
              style={this.style.arrow}
          >
            {this.props.renderArrow
                ? this.props.renderArrow('left')
                : <Image
                    source={arrowLeftSource}
                    //style={this.style.arrowImage}
                />}
          </TouchableOpacity>
      );
      yearRightArrow = (
          <TouchableOpacity onPress={this.addYear} style={this.style.arrow}>
            {this.props.renderArrow
                ? this.props.renderArrow('right')
                : <Image
                    source={arrowRightSource}
                    //style={this.style.arrowImage}
                />}
          </TouchableOpacity>
      );
    }
    let indicator;
    if (this.props.showIndicator) {
      indicator = <ActivityIndicator />;
    }
    return (
        <View>
            <View style={headerStyle}>
              {
                !this.props.hideViewToggle &&
                <Text style={this.style.monthText}>
                    {this.props.month.toString(this.props.monthFormat ? this.props.monthFormat : 'yyyy')}
                </Text>
              }
              {
                this.props.hideViewToggle &&
                <View style={{flexDirection: 'row'}}>
                  <View style={{marginRight:5}}>
                    {yearLeftArrow}
                  </View>
                  <Text style={this.style.monthText}>
                    {this.props.month.toString(this.props.monthFormat ? this.props.monthFormat : 'yyyy')}
                  </Text>
                  <View style={{marginLeft:5}}>
                    {yearRightArrow}
                  </View>
                </View>
              }
                <View style={{flexDirection: 'row'}}>
                  <View style={{marginRight:5}}>
                    {leftArrow}
                  </View>
                    <Text style={this.style.monthText}>
                        {this.props.month.toString(this.props.monthFormat ? this.props.monthFormat : 'MMMM')}
                    </Text>
                    <View style={{marginLeft:5}}>
                    {rightArrow}
                    </View>
                </View>
                {
                  !this.props.hideViewToggle &&
                  <TouchableOpacity onPress={this.translateView} style={this.style.arrow}>
                      <Image
                        source={require('../img/trigger.png')}
                      />
                  </TouchableOpacity>
                }
            </View>
            {
                !this.props.hideDayNames &&
                <View style={this.style.week}>
                    {this.props.weekNumbers && <Text style={this.style.dayHeader}></Text>}
                    {weekDaysNames.map((day, idx) => {
                     if(this.props.weekendsObv){
                       if (idx ===0 || idx ===6){
                         return <Text key={idx} style={weekendsObvTextStyle} numberOfLines={1}>{day}</Text>
                       }
                     }
                     return <Text key={idx} style={this.style.dayHeader} numberOfLines={1}>{day}</Text>
                    })}
                </View>
            }
        </View>
    );
  }
}
CalendarHeader.defaultProps = {
 weekendsObv: false
};
export default CalendarHeader;
